{extend name="../../index/view/public/layout" /}
{block name="style"}
<link rel="stylesheet" href="__STATIC__/member/css/member.css">
{/block}

{block name="main-container"}
    <div class="member-container wrapper clearfix">
        {include file="public/left" /}
        <div class="member-main">
            <div class="member-main-title clearfix">
                <h3> 消息管理 </h3>
            </div>
            <div class="list-filter">
                <ul>
                    <li class="clearfix" style="height:40px;">
                        <div class="title"  style="line-height: 40px">消息状态</div>
                        <div class="con" style="line-height: 40px">
                            <a href="/member/message" {notin name="status" value="0,1"} class="active" {/notin} >全部</a>
                            <a href="/member/message?t=0" {eq name="status" value="0" } class="active" {/eq}>未读</a>
                            <style type="text/css">
									.conNum{
                                        position: absolute;
                                        top: 112px;
                                        left: 498px;
                                        right: auto;
                                        display: inline-block;
                                        padding: 0 4px;
                                        font-size: 12px;
                                        line-height: 12px;
                                        height: 16px;
                                        color: #fff;
                                        background-color: #f76300;
                                        -moz-border-radius: 6px;
                                        border-radius: 6px;
                                       /* min-width: 15px;*/
                                        text-align: center;
									}
                                    .list-filter ul > li a.active {
                                        background-color: #FB3D51;
                                        color: #ffffff;
                                        height: 30px;
                                        border-radius: 4px;
                                        line-height: 30px;
                                    }
							</style>
                            {eq name="status" value="0" }  <i class="conNum">{$unread_num}</i> {/eq}
                            <a href="/member/message?t=1" {eq name="status" value="1" } class="active" {/eq}>已读</a>
                        </div>
                    </li>
                </ul>
            </div>
            <table class="record-table">
                <thead>
                    <tr>
                        <th width="20%">信息类型</th>
                        <th width="60%">内容</th>
                        <th width="20%">发送时间</th>
                    </tr>
                </thead>
                <tbody>
                {notempty name="data_list"}
                {volist name="data_list" id="val"}
                <tr class="message-item" data-id="{$val.id}">
                    <td width="20%" align="center">
                        {$val.title}
                        {if condition="$val.status eq 0"}
                            <span class="badge-dot"></span>
                        {/if}
                    </td>
                    <td width="60%" align="text">{$val.info}</td>
                    <td width="20%" align="center">{$val.create_time|date="y-m-d H:i:s", ###}</td>
                </tr>
                {/volist}
                {else /}
                <tr>
                    <td colspan="3" align="center">暂无数据</td>
                </tr>
                {/notempty}
                </tbody>
            </table>
            <div class="pages">
                {$data_list->render()}
            </div>
        </div>
    </div>
{/block}

{block name="script"}
<script>
    $(".message-item").on("click", function () {
        var $this = $(this);
        $.ajax({
            url: "{:url('read')}",
            data: {
                id: $this.data("id")
            },
            dataType: "json",
            success: function (d) {
                if( d.code == 1){
                    $this.find(".badge-dot").remove();
                    var num =  $('.conNum').html();
                    num--;
                    $('.conNum').html(num);
                    var mailNum  =  $('.topbar-right').children('a').eq(2).find('span').html();
                    mailNum --;
                    $('.topbar-right').children('a').eq(2).find('span').html(mailNum);
                }
            }
        })
    });

</script>
{/block}
